<template>
  <div>
    <template v-if="buttons && buttons.length > 0">
      <el-dropdown v-if="buttons.length > 1" trigger="click" @click.native.stop="">
        <el-button type="primary" icon="el-icon-arrow-down">操作</el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="bt in buttons" :key="bt.id" class="single-row-button-dropdown-menu" @click.native.stop="clickCallBack(bt.click)">
            <svg-icon :icon-class="bt.icon" />
            {{ bt.buttonName }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button v-else type="primary" @click.native.stop="clickCallBack(buttons[0].click)">
        <svg-icon :icon-class="buttons[0].icon" />
        {{ buttons[0].buttonName }}
      </el-button>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SingleRowButton',
  props: {
    baba: {
      type: Object,
      required: true
    },
    buttons: {
      type: Array,
      default: _ => []
    },
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    clickCallBack(val) {
      this.baba[val](this.row)
    }
  }
}
</script>
<style lang="scss" scoped>
.single-row-button-dropdown-menu{
  padding: 8px 17px !important;
}
</style>
